<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.head {
				width: 1000px;
				height: 300px;
				background-color: purple;
				margin: 10px auto;
			}

			.banner {
				width: 1000px;
				height: 300px;
				background-color: deepskyblue;
				margin: 10px auto;
			}

			.main {
				width: 1000px;
				height: 1500px;
				background-color: #40B83F;
				margin: 10px auto;
			}

			.slider-bar {
				position: absolute;
				left: 50%;
				top: 400px;
				margin-left: 500px;
				width: 45px;
				height: 130px;
				background-color: pink;
			}

			span {
				display: none;
				position: absolute;
				border: 0;
			}
		</style>
	</head>
	<body>
		<div class="slider-bar">
			<span class="goBack">
				返回顶部
			</span>
		</div>
		<div class="head">
			头部
		</div>
		<div class="banner">
			banner区域
		</div>
		<div class="main">
			主体部分
		</div>
		<script type="text/javascript">
			//1.获取元素 
			var sliderBar = document.querySelector('.slider-bar');
			var banner = document.querySelector('.banner');
			//banner.offsetTop被卷去头部的大小, 一定要写在滚动外面
			var bannerTop = banner.offsetTop;
			var silderbarTop = sliderBar.offsetTop - bannerTop;

			//获取main主体
			var main = document.querySelector('.main');
			var goBack = document.querySelector('.goBack');
			var mainTop = main.offsetTop;

			// console.log(bannerTop);
			//2.页面滚动事件 scroll
			document.addEventListener('scroll', function() {
				//window.pageYOffset 页面被卷去的头部
				// console.log(window.pageYOffset);
				if (window.pageYOffset >= bannerTop) {
					sliderBar.style.position = 'fixed'; //固定定位
					sliderBar.style.top = silderbarTop + "px";
				} else {
					sliderBar.style.position = 'absolute'; //绝对定位
					sliderBar.style.top = "400px";
				}

				if (window.pageYOffset >= mainTop) {
					goBack.style.display = "block";
				} else {
					goBack.style.display = "none";
				}
			})
<<<<<<< HEAD

			goBack.addEventListener('click', function() {
				animate(window, 0);
			});

			function animate(obj, target, callback) {
				// 先清除以前的定时器，只保留当前的一个定时器执行
				clearInterval(obj.timer);
				obj.timer = setInterval(function() {
					// 步长值写到定时器的里面
					// 把我们步长值改为整数 不要出现小数的问题
					// var step = Math.ceil((target - obj.offsetLeft) / 10);
					var step = (target - obj.pageYOffset) / 10;
					step = step > 0 ? Math.ceil(step) : Math.floor(step);
					if (obj.pageYOffset == target) {
						// 停止动画 本质是停止定时器
						clearInterval(obj.timer);
						// 回调函数写到定时器结束里面
						// if (callback) {
						//     // 调用函数
						//     callback();
						// }
						callback && callback();
					}
					// 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
					window.scroll(0, step + window.pageYOffset);

				}, 15);
			}
=======
>>>>>>> c124e25602d74ede1ae40928639048ef02001b68
		</script>
	</body>
</html>
